<template>
	<view class='audio' v-if="musicurl!==''">
		<view class="left" @tap="send">
			<view class="bg">
				<image class="imgs" :class="[ flag ? 'play' : 'stop']" :src="pic" mode="">
				</image>
			</view>
			<view class="text">
				<!-- 歌名 -->
				<text class="author">{{songs}} - {{author}}</text>
				<!-- 作者 -->
			</view>
		</view>

		<view class="right">
			<image @tap="play" v-if="flag" class="img" src="../static/icon/stops.png" mode=""></image>
			<image @tap="stopss" v-else class="img" src="../static/icon/play2.png" mode=""></image>
			<image class="img" src="../static/icon/playlist.png" mode=""></image>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "play",
		data() {
			return {
				imgs: "imgs",
				innerAudioContext: null,
				msg: "",
			};
		},
		mounted() {
			this.innerAudioContext = uni.createInnerAudioContext();
		},
		computed: {
			...mapState(["musicurl", "size", 'pic', 'songs', 'author', 'flag', 'livebofang', 'bofang']),
		},
		methods: {
			formatTime(time) {
				var minute = Math.floor(time / 60) % 60;
				var second = Math.floor(time) % 60
				return (minute < 10 ? '0' + minute : minute) + ':' +
					(second < 10 ? '0' + second : second)
			},
			play() {
				this.$store.commit('getfalg', false)
			}, //播放
			stopss() {
				this.$store.commit('getfalg', true)
			}, //暂停
			send() {
				uni.navigateTo({
					url: '/subpag/song/song'
				})
			}

		},
		updated() {
			this.innerAudioContext.onEnded(() => {
				console.log('播放结束');
				this.$store.commit('getsize', ['00:00', '0'])
				this.$store.commit('getfalg', false)
			})
			if (this.flag) {
				this.innerAudioContext.loop = true
				this.msg = this.musicurl
				this.innerAudioContext.autoplay = true
				this.innerAudioContext.src = this.musicurl;
				this.innerAudioContext.startTime = this.bofang //开始时间
				this.innerAudioContext.play()
				this.innerAudioContext.onTimeUpdate((res) => {
					const percentAudio = this.formatTime(parseInt(this.innerAudioContext.currentTime));
					const bofang = this.innerAudioContext.currentTime
					const duration = parseInt(this.innerAudioContext.currentTime / this.innerAudioContext
						.duration * 100) //进度条位置
					//进度条位置 = 当前时常  / 总时常 * 100 
					const longtime = this.innerAudioContext.duration //总时长
					const data = [percentAudio, duration, bofang, longtime]
					this.$store.commit('getsize', data)

					//当前播放时间   秒形式传入
					this.$store.commit('getcurrent', parseInt(this.innerAudioContext.currentTime))
				})
			} else {
				this.innerAudioContext.pause()
			}
		}

	}
</script>

<style>
	.imgs {
		animation: play 10s linear infinite;
		width: 40px;
		height: 40px;
		border-radius: 100%;
		margin-left: 10px;
		margin-top: 10px;
	}

	.author {
		color: #000000;
		font-size: 30rpx;
		padding-left: 18rpx;
		margin-top: 2px;
	}

	.text {
		margin-left: 120rpx;
		font-size: .5rem;
		/* 	// overflow: hidden;
		// text-overflow: ellipsis;
		// display: -webkit-box;
		// -webkit-box-orient: vertical;
		// -webkit-line-clamp: 2; */

	}

	.text>text {
		float: left;

	}

	@keyframes play {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.play {
		animation-play-state: running;
	}

	.stop {
		-webkit-animation-play-state: paused !important;
		/* Safari 和 Chrome */
	}

	.audio {
		display: flex;
		justify-content: space-between;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0 30rpx;
		width: 100%;
		background-color: #fff;
		height: 130rpx;
		// position: fixed;
		bottom: 44px;
		z-index: 2;
		border-top: 1px solid #ccc;
	}

	.left {
		display: flex;
		align-items: center;
		position: relative;
	}

	.bg {
		background: url(../static/icon/disc.png) no-repeat;
		background-size: 60px;
		width: 70px;
		height: 70px;
		position: absolute;
		top: 0px;
	}

	.right {
		display: flex;
		align-items: center;
	}

	.right>.img {
		width: 35px;
		height: 35px;
		margin: 0;
		padding: 0 20rpx;
	}
</style>
